<template>
  <div>
    <common-head></common-head>
  <div class="container">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" loading-text='等一哈,正在疯狂加载...'>
      <van-list v-model="loading" :immediate-check="false" :finished="finished" finished-text="我是有底线的" @load="aonLoad">
        <van-row gutter="0">
          <van-col span="12" v-for="(item,idx) in list" :key='idx' @click="getGoodsDetail(item.id)">
            <div class="content" >
              <!-- 图片 -->
              <van-image fit="contain" lazy-load :src="item.img_url" />
              <!-- 标题 -->
              <p class="title">{{item.title}}</p>
              <!-- 价格 -->
              <div class="goodsInfo">
                  <div class="price">
                      <span class="sellPrice">￥{{item.sell_price}}</span>
                      <del class="marketPrice">￥{{item.market_price}}</del>
                  </div>
                   <van-cell title="热卖中" :value="'剩'+item.stock_quantity+'件'" />
              </div>
            </div>
          </van-col>
        </van-row>
      </van-list>
    </van-pull-refresh>
  </div>
    <common-footer></common-footer>
  </div>
</template>
<script>
export default {
  props: [],
  data () {
    return {
      list: [],
      loading: false,
      // 上啦加载
      finished: false,
      refreshing: false,
      // 下拉刷新
      page: 0
    }
  },
  mounted () {
    this.getGoodsList(this.page)
  },
  methods: {
    async getGoodsList (page) {
      try {
        const { data: res } = await this.$http.get('/api/getgoods?pageindex=' + page)
        console.log(res, 'res')
        res.status === 0 ? (this.list = [...this.list, ...res.message]) : this.$notify({ type: 'danger', message: '获取商品列表失败!' })
        // 加载状态结束
      } catch (error) {
        this.$notify({ type: 'danger', message: error })
      }
    },
    aonLoad () {
      console.log('aonLoad')
      this.onLoad()
    },
    // 上拉加载
    onLoad () {
      // 异步更新数据
      console.log('onload', this.loading)
      if (this.page >= 3) {
        this.finished = true
        return
      }
      this.getGoodsList(++this.page)
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    // 下拉刷新
    onRefresh () {
      // 清空列表数据
      this.finished = false
      // 重新加载数据

      this.onLoad()
      setTimeout(() => {
        this.refreshing = false
      }, 1000)
    },
    getGoodsDetail (id) {
      this.$router.push('/goodsDetail/' + id)
    }
  }
}
</script>
<style lang="less" scoped>
.van-pull-refresh{
  padding: 50px 0;
}
.content {
  border: 1px solid rgb(212, 211, 211);
  margin: 5px;
  .van-image {
    padding: 10px;
  }
  .title {
    margin:20px  10px;
    font-size: 14px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    // padding: 20px 10px ;
  }
  .goodsInfo{
      background-color: rgb(241, 241, 241);
      padding-top: 15px;
      .van-cell{
          background-color: rgb(241, 241, 241);
          padding: 2px 15px;
      }
  }
  .price{
     padding: 0 15px;
     .sellPrice{
         color: #f00;
         margin-right: 1.5em;
     }
  }
}
</style>
